<template>
  <div>
    <el-select v-model="selectedCity" placeholder="请选择城市" style="width: 200px;">
      <el-option
        v-for="city in cities"
        :key="city.value"
        :label="city.label"
        :value="city.value"
      ></el-option>
    </el-select>
    <el-button type="primary" @click="submitCity" style="margin-left: 10px;">确认</el-button>
  </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
  name: 'CitySelector',
  data() {
    return {
      selectedCity: '',
      cities: [
        { value: 'beijing', label: '北京' },
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' },
        // 添加更多城市选项
      ],
    };
  },
  methods: {
    async submitCity() {
      if (this.selectedCity) {
        try {
          const response = await fetch('你的后台接口', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ city: this.selectedCity }),
          });

          if (response.ok) {
            Message.success('城市提交成功');
          } else {
            throw new Error('提交失败');
          }
        } catch (error) {
          Message.error(error.message);
        }
      } else {
        Message.warning('请选择一个城市');
      }
    },
  },
};
</script>

<style scoped>
/* 添加你的样式 */
</style>
